<template>
  <div class="default-column">

    <alink ref="child"></alink>

    <customer-task-query-div></customer-task-query-div>

    <el-table v-loading="taskListLoading" element-loading-text="拼命加载中"
      :data="taskList" border stripe class="default-table" size="mini">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column align="center" prop="userId" label="用户ID" width="100">
        <template slot-scope="scope">
          <p style="color: blue; font-size: 14px" @click="showUserData(scope.row.userInfo)">{{scope.row.userId}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="userInfo.realName" label="用户姓名" width="80">
        <template slot-scope="scope">
          <p style="color: blue; font-size: 14px" @click="showUserData(scope.row.userInfo)">{{scope.row.userInfo.realName}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="userInfo.cell" label="用户手机" width="115">
        <template slot-scope="scope">
          <span style="color: #67C23A; font-size: 14px">{{scope.row.userInfo.cell}}</span>
          <span style="color: red"><i class="iconfont icon-weibiaoti-" @click="phoneToUser(scope.row.userInfo.cell)"></i></span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="taskName" label="请求类型" width="100">
        <template slot-scope="scope"><p style="color: #409EFF; font-size: 14px">{{scope.row.taskName}}</p></template>
      </el-table-column>
      <el-table-column align="center" prop="dayId" label="请求时间" width="90"></el-table-column>
      <el-table-column align="center" prop="taskMessage" label="异常信息/标签">
        <template slot-scope="scope">
          <span style="color: #F56C6C; font-size: 14px">{{scope.row.taskMessage}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="userLabel" label="服务标定" width="90"></el-table-column>
      <el-table-column align="center" prop="operateStatus" label="处理状态" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.operateStatus === 1" size="mini" type="success">未处理</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 2" size="mini">跟进中</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 3" size="mini" type="info">已完成</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 4" size="mini" type="info">无需处理</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 5" size="mini" type="info">已加微信</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 7" size="mini" type="danger">处理失败</el-tag>
          <el-tag v-else size="mini" type="danger">未知</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="operateor" label="跟踪人" width="120"></el-table-column>
      <el-table-column align="center" prop="time" label="最后处理时间" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.operateTime !== ''">{{scope.row.time}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="operateMessage" label="跟踪结果"></el-table-column>

      <el-table-column align="center" prop="status" label="操作">
        <template slot-scope="scope">
          <!--<el-button type="text" size="mini" style="color: #E6A23C" @click="showServiceTask(scope.row)">查看</el-button>-->
          <el-button type="text" size="mini" style="color: #1E90FF" @click="editCustomerTask(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[8, 10, 12, 20]"
        :current-page.sync="page.current"
        :page-size="page.size"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <recycle-customer-task></recycle-customer-task>

    <user-task-list></user-task-list>

    <user-data ref="childUserData"></user-data>

  </div>
</template>

<script>
  import CustomerTaskQueryDiv from "../../components/task/CustomerTaskQueryDiv.vue";
  import UserTaskList from "../../components/task/UserTaskList.vue";
  import RecycleCustomerTask from "../../components/task/RecycleCustomerTask.vue";
  import Alink from "../../components/task/Alink.vue";
  import UserData from "./UserData.vue";

  export default {
    components: {
      UserData,
      Alink,
      RecycleCustomerTask,
      UserTaskList,
      CustomerTaskQueryDiv},
    name: 'CustomerTask',
    data () {
      return {
        queryForm: {},

        taskList: [],
        taskListLoading: false,
        page: {
          current: 1,
          size: 8,
          total: 0
        }
      }
    },
    created() {
    },
    methods: {

      phoneToUser(phone) {
        this.$refs.child.test(phone);
      },

      // 点击userId查看用户信息
      showUserData(userData) {
        this.$refs.childUserData.showUserData(userData);
      },

      // 页面参数修改
      handleSizeChange(val) {
        this.page.current = 1;
        this.page.size = val;
        this.loadCustomerTaskList(this.queryForm);
      },
      handleCurrentChange() {
        this.loadCustomerTaskList(this.queryForm);
      },

      // 修改任务记录
      listContains(list, value) {
        let r = false;
        list.forEach(v => {
          if (v === value) {
            r = true;
          }
        });
        return r;
      },
      async editCustomerTask(user) {
        this.$store.state.userTaskList = [];
        this.$store.state.userTaskListDialogEditVisible = true;

        this.$store.state.userLabels = [];
        let tag = await this.$$get('/task/usr/label/' + user.userId);
        this.$store.state.userLabels = tag.data.data;

        this.$store.state.selectUserLabelOptions = [];
        let ops = await this.$$get('/task/user/label/list');
        ops.data.data.forEach(op => {
          this.$store.state.selectUserLabelOptions.push({
            label: op, value: op, disabled: this.listContains(this.$store.state.userLabels, op)
          })
        });

        let data = await this.$$post('/task/user/id', {userId: user.userId});
        if (this.checkResponse(data)) {
          data = data.data.data;

          // 任务展示列表
          this.$store.state.userLabelsInit = [];
          this.$store.state.userLabelsHide = [];
          data.forEach(item => {
            item.operateStatus === 1 ? this.$store.state.userLabelsInit.push(item) :
              this.$store.state.userLabelsHide.push(item);
          });
          this.$store.state.userLabelsInit.forEach(item => this.$store.state.userTaskList.push(item));
          this.$store.state.showHistoryButton = true;
        }
      },

      loadCustomerTaskList2() {
        this.loadCustomerTaskList(this.queryForm);
      },
      loadCustomerTaskList3(queryForm) {
        this.page.total = 0;
        this.page.current = 1;
        this.loadCustomerTaskList(queryForm);
      },
      async loadCustomerTaskList(queryForm) {
        this.queryForm = queryForm;
        this.taskListLoading = true;
        let data = await this.$$post('/task/page/list/query', {
          serviceId: queryForm.serviceId,
          userId: queryForm.userId,
          userPhone: queryForm.userPhone,
          taskType: queryForm.taskType,
          operateStatus: queryForm.operateStatus,
          userType: queryForm.userType,
          taskLabel: queryForm.taskLabel,
          taskLabelSort: queryForm.taskLabelSort,
          userReqTimeStart: queryForm.userReqTime[0] === '' ? '' : queryForm.userReqTime[0].getTime(),
          userReqTimeEnd: queryForm.userReqTime[1] === '' ? '' : queryForm.userReqTime[1].getTime(),
          operateTimeStart: queryForm.operateTime[0] === '' ? '' : queryForm.operateTime[0].getTime(),
          operateTimeEnd: queryForm.operateTime[1] === '' ? '' : queryForm.operateTime[1].getTime(),
          userLabel: queryForm.userLabel,
          registerFromName: queryForm.registerChannel,
          registerDeviceFromName: queryForm.downloadChannel,
          current: this.page.current,
          size: this.page.size
        });
        this.taskListLoading = false;
        if (this.checkResponse(data)) {
          data = data.data.data;
          this.page.total = data.total;
          this.taskList = data.data;
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
